/*
  学习目标：性能优化手段- 通过shouldComponentUpdate阻止非必要更新
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'hello React',
    title: 'hello Vue3',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  handleClickTitle = () => {
    this.setState({ msg: this.state.title + '!' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <h1>msg： {this.state.msg}</h1>
        <button onClick={this.handleClickMsg}>点我修改msg</button>

        <h1>title： {this.state.title}</h1>
        <button onClick={this.handleClickTitle}>点我修改title</button>

        <Footer title={this.state.title} count={this.state.count}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 下次更新前的新的props
    // 通过返回值 true 表示允许更新
    // false 表示不更新

    if (nextProps.count === this.props.count) {
      return false;
    }
    return true;
  }

  componentDidUpdate() {
    console.log('Footer被更新了  ----->  ');
  }

  render() {
    return (
      <div>
        我是Footer - {this.props.count} - {this.props.title}
      </div>
    );
  }
}
